<%- include fheader.ejs%>
<style>
    body{color:#333;overflow:hidden}
   .ui-dialog-bd div{
        text-align: left;
   }
   #qrcodeWrap img{
        width:150px;
        display: block;
        margin:25px auto
   }
   #dlcode img{
        width: 250px;
        display: block;
        margin: 0 auto
   }
   .ui-panel{
       margin-bottom:0
   }
   .wrp{
       background: #fff;
       padding: 15px 15px 0;
       position: relative;
   }
   .wrp h3{
       padding: 0 0 0 35px;
       background: url(/wx/img/productLi.png) no-repeat 0 center;
       height: 36px;
       line-height: 36px;
       background-size: 28px;
   }
   #uploadCheck h3{
       background: url(/wx/img/checkIcon.png) no-repeat 0 center;
       background-size: 26px;
       padding-left: 30px;
   }
   .wrp .ui-list li{
        margin-left:0
   }
   img{
        vertical-align: middle;
   }
   #selProduct{margin:10px}
   #selProduct:after{
        font-family: iconfont!important;
        font-size: 32px;
        line-height: 44px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: .2px;
        display: block;
        color: rgba(0,0,0,.5);
        color: #c7c7c7;
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -22px;
        border:0
   }
  .imgWrp {
      width: 60px;
      height: 60px;
      margin: 10px;
      background-color: #dadada;
      border-radius: 3px;
      text-align: center;
      line-height: 60px;
      position: relative;
      overflow: hidden;
  }
  .imgWrp img{
        max-width:80%;
        max-height:80%;
  }
  #btnBuy{
        margin: 10px 8%;
        background-color: #18b4ed!important;
        color: white!important;
        height: 40px;
        border-radius: 5px;
  }
  #mobile{padding-left:85px}
  .imgWrp input[type=file]{
        position:absolute;
        width:60px;
        height:60px;
        top:0;
        left:0;
        opacity:0
  }
  .imgWrp .uploadsuc{
      width:100%;
      height:20px;
      font-size:12px;
      line-height:20px;
      text-align:center;
      position: absolute;
      left: 0;
      top: 0;
      color:white;
      opacity: 0.5;
      background-color: green;
      overflow: hidden;
      font-weight:bold;
      display:none
  }
   .imgWrp .uploading{
        width:60px;
        height:60px;
        text-align:center;
        position: absolute;
        left: 0;
        top: 0;
        color:white;
        opacity: 0.5;
        background-color: #000;
        overflow: hidden;
        display:none
   }
   .ui-scroller1{
       width:auto;
       overflow:hidden;
   }
    .red{color:#ff2e00}
    .blue{color:#2ba7f2}
   .ui-footer .ui-btn-primary, .ui-footer .ui-btn-primary:focus{
       background-color: #18b4ed!important;
       color:#fff!important;
   }
   .ui-grid-trisect>li{
       width:50%;
       text-align:center;
   }
   .ui-grid-trisect>li.active .ui-border{
       border-color: #2ba7f2;
   }
   .ui-grid-trisect>li .ui-border p{
        font-size:14px
   }
   .ui-panel .ui-grid-trisect{
       padding:0;
       margin-top:10px
   }
    .ui-border div{
        padding: 5px 0;
    }
    .wrp .ui-arrowlink:before{
        display:none
    }
   @media screen and (-webkit-min-device-pixel-ratio: 2) {
       li.active .ui-border:after {
           border:1px solid #2ba7f2
        }
       .ui-border:after{
           border:1px solid #dddddd;
       }
   }
    .ui-list-info{
        display:flex;
        display:-webkit-flex;
        justify-content: space-between;
        align-items: center;
    }
    .ui-list-info p{
        width:80%;
        color:#333
    }
    .sicon{
        width: 0;
        height: 0;
        border-bottom: 20px solid #2ba7f2;
        border-left: 20px solid transparent;
        position: absolute;
        bottom: 0;
        right: 0;
        display:none
    }
    .ui-grid-trisect>li.active .sicon{display:block}
    .ui-grid-trisect>li.active:before{
        background: url(/wx/img/choose.png) no-repeat 4px center;
        background-size: 10px;
        content: '';
        width: 16px;
        height: 16px;
        position: absolute;
        font-size: 10px;
        bottom: 10px;
        right: 4px;
        z-index: 9;
    }
    .ui-dialog-bd h4{
        text-align:center;
        margin-bottom:10px
    }
   .ui-btn-group #dialogButton0{
        background:none!important;
       color:#2ba7f2
    }
    .ui-dialog.show{
        -webkit-box-orient: vertical;
    }
    .ui-dialog-cnt{
        margin:10px 0
    }
    .ui-dialog-bd .methods{
        text-align:center
    }
    .mLogo{
        width: 70px;
        height: 70px;
        border-radius: 70px;
        display: block;
        background-color: #f7bd0c;
        text-align: Center;
        line-height: 70px;
        font-size: 30px;
        color: white;
        margin: 10px auto;
    }
    #prizeNotice{
        width:100%; height:30px;line-height: 30px; overflow:hidden;
        background: #ffd823;color:#000;
        text-align:center;
        z-index: 10;
        font-size: 14px;
    }
    #prizeNotice li{
        height:30px;
        overflow:hidden;
        line-height:30px;
    }
</style>
<script src="/wx/js/fx.js"></script>

<!--滚动消息-->
<div id="prizeNotice">
    <ul>
        <%for(var t in annlist){%>
        <li><%=annlist[t]['notice_text']%></li>
        <%}%>
    </ul>
</div>

<!-- 购买产品-->
<section class="ui-container ui-scroller" style="margin-bottom: 60px;">
    <div>
         <div class="wrp">
            <div class="ui-panel">
                <h3 class="ui-arrowlink">
                    <%= out_trade_no_old?'选择退换保险类型':'选择产品类型'%>
                </h3>
                <ul class="ui-grid-trisect" id="productList">
                    <%for(var i in prod_list){%>
                    <li data-prod="<%= prod_list[i]['prod_id']%>" data-prodtype="<%= prod_list[i]['prod_type']%>" data-price="<%=prod_list[i]['price']/100%>">
                        <div class="ui-border">
                            <div>
                            <h4 class="ui-nowrap-multi"><%=prod_list[i]['price']/100%>元碎屏保</h4>
                            <p class="ui-nowrap blue"><%=prod_list[i]['prod_name']%></p>
                            <span class="sicon"></span>
                            </div>
                        </div>
                    </li>
                    <%}%>
                </ul>
            </div>
         </div>
        <div class="wrp" id="uploadCheck">
             <h3>上传认证材料</h3>
             <ul class="ui-list  ui-border-tb">
                 <li class="ui-border-t">
                     <div class="imgWrp pic" id="imgMobile3">
                         <img src="/wx/img/checkVideo.png">
                         <input type="file" name="apply_video" accept="video/*" data-for="imgMobile3" data-type="apply_video">
                         <div class="uploading">上传中</div>
                         <div class="uploadsuc">视频已传</div>
                     </div>
                     <div class="ui-list-info clearfix">
                         <p class="pull-left">
                             请视频录入，使用被保手机
                             拨号输入 <span class="blue">“*#06#”</span>
                         </p>
                         <div class="notice pull-right" id="showVideo">
                             <img src="/wx/img/checkInfo.png" alt="">
                         </div>
                     </div>
                 </li>
                 <li class="ui-border-t">
                     <div class="imgWrp pic" id="imgMobile2">
                         <img src="/wx/img/checkPic.png">
                         <input type="file" name="file-mobile2" accept="image/*" data-for="imgMobile2" data-type="img_invoice_1">
                         <div class="uploading">上传中</div>
                     </div>
                     <div class="ui-list-info">
                         <p class="pull-left">
                             上传购物小票或发票
                         </p>
                         <div class="notice pull-right" id="showImg">
                             <img src="/wx/img/checkInfo.png" alt="">
                         </div>
                     </div>
                 </li>
             </ul>
        </div>
        <div class="ui-form ui-border-t wrp">
            <form>
                <div class="ui-form-item ui-form-item-l ui-border-b">
                    <label>
                       手机号：
                    </label>
                    <input type="text" placeholder="请输入客户端手机号码" id="mobile">
                </div>
                <div class="ui-form-item ui-form-item-r ui-border-b">
                    <input type="text" placeholder="请输入短信验证码" id="smscode">
                    <input type="hidden" name="out_trade_no_old" id="out_trade_no_old" value="<%= out_trade_no_old%>">
                    <!-- 若按钮不可点击则添加 disabled 类 -->
                    <button type="button" class="ui-border-l blue" id="btnGetSmsCode">发送验证码</button>
                </div>
            </form>
        </div>

        <footer style="position:static;margin-top:5px;" class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
            <div class="red" style="width:60%;text-align: center;">需支付 ¥<span id="divPrice">0</span>元</div>
            <button class="ui-btn-primary" style="background-color: #18b4ed !important;color: #fff !important;" id="btnSureOrder" type="button">下一步</button>
        </footer>
     </div>

 </section>

<%- include navbar.ejs%>

<div class="ui-dialog" id="demoVideo">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <div>
                <h4>视频图例</h4>
                <div id="ifrwrap">

                </div>
            </div>
        </div>
        <div class="ui-dialog-ft ui-btn-group">
            <button type="button" class="select" id="demoVideoBtn">我知道了</button>
        </div>
    </div>
</div>
<div class="ui-dialog" id="demoPic">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <div>
                <h4>图片图例</h4>
                <div><img src="/wx/img/uploadpic0.jpg" alt="" style="width:100%"></div>
            </div>
        </div>
        <div class="ui-dialog-ft ui-btn-group">
            <button type="button" class="select" id="demoPicBtn">我知道了</button>
        </div>
    </div>
</div>

<div class="ui-dialog" id="uiDialogs">
    <div class="ui-dialog-cnt btnBuy" data-paytype="1">
        <div class="ui-dialog-bd">
            <div class="methods">
                <span class="mLogo">客</span>
                <p>客户扫码支付</p>
            </div>
        </div>
    </div>
    <div class="ui-dialog-cnt btnBuy" data-paytype="2">
        <div class="ui-dialog-bd">
            <div class="methods">
                <span class="mLogo" style="background-color:#18cc47">代</span>
                <p>店员代付</p>
            </div>
        </div>
    </div>
</div>
<script src="//cdn.juqingdata.com/assets/js/exif.js"></script>
<script src="/wx/js/MegaPixImage.js"></script>
<script src="//cdn.juqingdata.com/assets/js/qrcode.min.js"></script>
<script>
    $(function() {
        function autoScroll(obj){
            $(obj).find("ul").animate({
                marginTop : "-30px"
            },500,function(){
                $(this).css({marginTop : "0px"}).find("li").first().appendTo(this);
            })
        }
        setInterval(function () {
            autoScroll("#prizeNotice")
        },10000);

        //购买
        var SEND_VCODE = '/rest/svcLogin/mdGenSMS';
        var CHECK_VCODE = '/rest/svcLogin/mdVerifySMSByInputCode';
        var GEN_ORDER = '/rest/svcWx/genPay';
        var OLD_ORDER = '/rest/svcWxPage/oldphone';
        var upyunConfig = {
            policy: '<%= upyun.policy %>',
            signature: '<%= upyun.signature %>',
            bucket: '<%= upyun.bucket %>',
            domain: '<%= upyun.domain %>',
        };
        var oprice='<%= (oprod&&(oprod.price))||0%>';
        var acctype='<%=accType%>';
        var cellno = '';
        var udid = '';

        var uimg = {
            apply_video: {img: null, title: '手机视频'},
            img_invoice_1: {img: null, title: '发票/小票照片'}
            //img_cellnoandface_1:{img:null,title:'手机照片'},
        };

        $('input[type=file]').change(function () {
            var $file = $(this);
            if ($file[0].files <= 0) {
                return;
            }
            var prodId = $('#prodList');
            var file = $file[0].files[0];
            var $imgWrap = $('#' + $file.data('for'));
            var $img = $imgWrap.find('img');
            var $uploading = $imgWrap.find('.uploading');
            var $vuploadsec = $imgWrap.find('.uploadsuc');
            var type = $file.data('type');
            var filename = file.name;
            var mime = filename.toLowerCase().substr(filename.lastIndexOf("."));
            var isVideo = type == 'apply_video';
            var imgMap = {
                '.jpg': 1, '.png': 1, '.jpeg': 1, '.gif': 1, '.bmp': 1
            };
            if (isVideo) {
                imgMap = {'.mp4': 1, '.mov': 1, '.3gp': 1, '.avi': 1, '.rmvb': 1, '.flv': 1, '.mkv': 1};
                //$vuploadsec.hide();
                $vuploadsec.css({'color':'white','width':'0'}).text('上传中').show();
            }
            if (!imgMap[mime]) {
                juq.showTipErr(isVideo ? '请上传视频文件' : '请上传图片文件');
                return;
            }
            var p = {
                cellno: cellno,
                prod_id: prodId,
                imgtype: type,
                udid: udid,
                upyunConfig: upyunConfig
            };
            $uploading.css('color', 'white').text('上传中').show();

            upload.upImg(file, $img, p, function (path) {
                if (isVideo) {
                    $vuploadsec.text('视频已传').show();
                } else {
                    $img.attr('src', path);
                }
                $uploading.hide();
                uimg[type].img = path;
            }, function (msg) {
                //$uploading.css('color', 'red');
                juq.showTipErr(msg, 1e4);
                $uploading.hide();
                //$uploading.text(msg);
            }, isVideo, function(event) {
                var pc = event.loaded / event.total;
                $vuploadsec.show();
                $vuploadsec.css('width',pc*100+'%');
            });
        });

        $('.pic img').on('touchend', function (e) {
            e.preventDefault();
            var src = $(this).attr('src');
            var dia = $.dialog({
                content: '<img src="' + src + '" style="max-width:100%;max-height:400px">'
            });
            dia.on('touchend', function (e) {
                e.preventDefault();
                if (e.target.id == 'dialogButton0') {
                    $.dialog('hide');
                }
            })
        });

        $('#prodList').change(function () {
            var prodId = $(this).val();
            if (prodId != '') {
                $('#selNotice').text($('#desc_' + prodId).html());
            } else {
                $('#selNotice').text('注意事项：请选择对应类型产品投保。');
            }
        });

        //mobile,smscode,btnBindCard,btnGetSmsCode
        var $btnGetSmsCode = $('#btnGetSmsCode');
        $btnGetSmsCode.on('touchend', function () {
            if ($btnGetSmsCode.hasClass('disabled')) {
                return;
            }
            var phoneNo = $('#mobile').val();

            var regexp = new RegExp("^(13[0-9]|15[012356789]|17[0135678]|18[0-9]|14[57])[0-9]{8}$", 'ig');
            if (!regexp.test(phoneNo)) {
                juq.showTipSuc('手机号码错误');
                return;
            }
            var p = {
                cellno: phoneNo,
                udid: ''
            };
            var ov = $btnGetSmsCode.text();
            $btnGetSmsCode.text('发送中..');
            $btnGetSmsCode.addClass('disabled');
            juq.fpost(SEND_VCODE, p, function () {
                var wt = 60;
                var si = setInterval(function () {
                    if (--wt < 1) {
                        si && clearInterval(si);
                        $btnGetSmsCode.removeClass('disabled').text(ov);
                    } else {
                        $btnGetSmsCode.text(ov + '(' + wt + ')')
                    }
                }, 1000);
                juq.showTipSuc('验证码发送成功');
            }, function (res, info) {
                $btnGetSmsCode.removeClass('disabled').text(ov);
                juq.showTipErr(info);
            });
        });

        $('#btnSureOrder').on('touchend', function () {
            //var dia2=$("#uiDialogs").dialog("show");return;
            var prodId = $('#productList').find('li.active').data('prod');
            var mobile = $('#mobile').val();
            var randCode = $('#smscode').val();
            if (!prodId || prodId == '') {
                juq.showTipSuc('请选择产品');
                return;
            }

            for (var i in uimg) {
                if (!uimg[i].img) {
                    juq.showTipErr('请上传' + uimg[i].title);
                    return;
                }
            }

            var regexp = new RegExp("^(13[0-9]|15[012356789]|17[0135678]|18[0-9]|14[57])[0-9]{8}$", 'ig');
            if (mobile == '') {
                juq.showTipSuc('手机号不能为空');
                return;
            }
            if (randCode == '') {
                juq.showTipSuc('验证码不能为空');
                return;
            }
            if (!regexp.test(mobile)) {
                juq.showTipSuc('手机号码错误');
                return;
            }

            var prodtype = $('#productList').find('li.active').data('prodtype');
            if(prodtype == 2){
                var time = (+new Date());
                var prodId = $('#productList').find('li.active').data('prod');//$('#prodList').val();
                var mobile = $('#mobile').val();
                var randCode = $('#smscode').val();
                var out_trade_no_old = $('#out_trade_no_old').val();
                var payType = $(this).data('paytype');
                var p = {
                    payType: payType,
                    prodId: prodId,
                    cellno: mobile,
                    vcode: randCode,
                    img_invoice: uimg['img_invoice_1'].img,
                    img_cellnoandface: '',//uimg['img_cellnoandface_1'].img||'',
                    apply_video: uimg['apply_video'].img,
                    out_trade_no_old:out_trade_no_old
                };
                var vp = {
                    cellno: mobile,
                    rand_code: randCode,
                    udid: ''
                };

                juq.showLoading();
                juq.fpost(CHECK_VCODE, vp, function (info) {
                    location.href = '/rest/svcWxPage/oldphone?prodId='+prodId+'&cellno='+mobile+'&vcode='+randCode+'&img_invoice='+uimg['img_invoice_1'].img+'&apply_video='+uimg['apply_video'].img
                        +'&out_trade_no_old='+out_trade_no_old+'&orderPrice='+$('#divPrice').text();
                }, function (res, info) {
                    juq.hideLoading();
                    juq.showTipErr(info);
                });

            }else{
                if(acctype == 2){
                    var time = (+new Date());
                    var prodId = $('#productList').find('li.active').data('prod');//$('#prodList').val();
                    var mobile = $('#mobile').val();
                    var randCode = $('#smscode').val();
                    var out_trade_no_old = $('#out_trade_no_old').val();
                    var p = {
                        payType: '3',
                        prodId: prodId,
                        cellno: mobile,
                        vcode: randCode,
                        img_invoice: uimg['img_invoice_1'].img,
                        img_cellnoandface: '',//uimg['img_cellnoandface_1'].img||'',
                        apply_video: uimg['apply_video'].img,
                        out_trade_no_old:out_trade_no_old
                    };
                    var vp = {
                        cellno: mobile,
                        rand_code: randCode,
                        udid: ''
                    };

                    juq.showLoading();
                    juq.fpost(CHECK_VCODE, vp, function (info) {
                        juq.fpost(GEN_ORDER, p, function (data, res) {
                            juq.hideLoading();
                            if(res.res==2){
                                location.href = '/wx/html/paySuccess.html';
                            }
                        }, function (res, info) {
                            juq.hideLoading();
                            juq.showTipErr(info);
                        })
                    }, function (res, info) {
                        juq.hideLoading();
                        juq.showTipErr(info);
                    });

                }else {
                    var dia2 = $("#uiDialogs").dialog("show");
                }
            }
        });

        $('.btnBuy').on('touchend', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var time = (+new Date());
            var prodId = $('#productList').find('li.active').data('prod');//$('#prodList').val();
            var mobile = $('#mobile').val();
            var randCode = $('#smscode').val();
            var out_trade_no_old = $('#out_trade_no_old').val();
            var payType = $(this).data('paytype');
            var p = {
                payType: payType,
                prodId: prodId,
                cellno: mobile,
                vcode: randCode,
                img_invoice: uimg['img_invoice_1'].img,
                img_cellnoandface: '',//uimg['img_cellnoandface_1'].img||'',
                apply_video: uimg['apply_video'].img,
                out_trade_no_old:out_trade_no_old
            };
            var vp = {
                cellno: mobile,
                rand_code: randCode,
                udid: ''
            };

            juq.showLoading();
            juq.fpost(CHECK_VCODE, vp, function (info) {
                juq.fpost(GEN_ORDER, p, function (data, res) {
                    juq.hideLoading();
                    if(res.res==2){
                        location.href = '/wx/html/paySuccess.html';
                    }else {
                        location.href = '/rest/svcWxPage/wxpay?orderNo=' + data.order_no;
                    }
                }, function (res, info) {
                    juq.hideLoading();
                    juq.showTipErr(info);
                })
            }, function (res, info) {
                juq.hideLoading();
                juq.showTipErr(info);
            });
        });

        $('#uiDialogs').on('touchend', function () {
            setTimeout(function () {
                $("#uiDialogs").dialog("hide");
            }, 500);
        });

        $("#showVideo").on('touchend', function () {
            $('#ifrwrap').html('<iframe frameborder="0" width="100%" height="100%" src="http://v.qq.com/iframe/player.html?vid=b0320axocy9&tiny=0&auto=0" allowfullscreen></iframe>');
            $("#demoVideo").dialog("show");
        });
        $("#demoVideoBtn").on('tap', function (e) {
            //$('#ifrwrap iframe').attr('src','');
            setTimeout(function () {
                $('#ifrwrap iframe').remove();
                $("#demoVideo").dialog("hide");
            }, 500);
        });

        $("#showImg").on('touchend', function () {
            var dia = $("#demoPic").dialog("show");
        });
        $("#demoPicBtn").on('tap', function (e) {
            setTimeout(function () {
                $("#demoPic").dialog("hide");
            }, 500);
        });

        $('#productList').on('tap', 'li', function () {
            $('#productList').find('li').removeClass('active');
            $(this).addClass('active');
            var newPrice = $(this).data('price')*100;
            var payPrice = oprice>newPrice ? 0 : (newPrice-oprice)/100;
            $('#divPrice').html(payPrice);
        });

        var offsetHeight = 80;
        if($('#out_trade_no_old').val()!=''){
            $('#navbar').hide();
            offsetHeight = 40;
        }
        $('.ui-scroller').css('height', $(window).height() - offsetHeight);
        var scroll = new fz.Scroll('.ui-scroller', {scrollY: true});


    });
</script>
<%- include ftailer.ejs%>